<template>
 <div id="userLoginPage">
   <h1 class='title'>鱼皮云图库-用户登录</h1>
   <div class="desc">企业级智能协同云图库</div>
   <a-form
     :model="formState"
     name="basic"
     autocomplete="off"
     @finish="handleSubmit"
   >
     <a-form-item
       name="userAccount"
       :rules="[{ required: true, message: '请输入账户' }]"
     >
       <a-input v-model:value="formState.userAccount" placeholder='请输入账户' />
     </a-form-item>

     <a-form-item
       name="userPassword"
       :rules="[
         { required: true, message: '请输入密码' },
         { min: 8, message: '密码不能少于8位' }
         ]"
     >
       <a-input-password v-model:value="formState.userPassword" placeholder='请输入密码' />
     </a-form-item>

     <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
      没有账户？
       <RouterLink to='/user/register'>去注册</RouterLink>
     </a-form-item>`

     <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
       <a-button type="primary" html-type="submit">登录</a-button>
     </a-form-item>
   </a-form>
 </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { userLoginUsingPost, userLogoutUsingPost } from '@/api/userController.ts'
import { message } from 'ant-design-vue'
import router from '@/router'

// 1. 获取登录用户状态仓库实例
const loginUserStore = useLoginUserStore()
const formState = reactive<API.UserRegisterRequest>({
  userAccount: '',
  userPassword: '',
});
const handleSubmit = async (values: any) => {
  console.log('Success:', values);
  const res = await userLoginUsingPost(values)
  if (res.data.code === 0 && res.data.data) {
    await loginUserStore.fetchLoginUser()
    message.success("登录成功")
    router.push({
      path : '/',
      replace:true
    })
  }else{
    message.error("登录失败，"+res.data.message)
  }
};

</script>


<style scoped>
#userLoginPage {
  max-width: 700px;
  margin: 0 auto;
}
.desc {
  margin: 20px 0 20px 0;

}
</style>
